<template>
	
	<view class="main">
		<view class="msg">
			位于四川省成都市郫都区德源镇东林艺术村，是全国唯一经袁隆平院士授权以其名字命名的园区。<br>
			全国首批科学家精神教育基地，园区以袁隆平院士为精神支柱，以稻蒜文化为基础，将科研场景
			<br>变成教学场景，建立劳动教育、农业科普教育基地及成人实训基地。
		</view>
		 <view class="card1">
		    <view class="card1-content">
		      <image class="card1-image" src="../../static/g1.png"></image>
		      <button class="card1-button ">个人预约<br>Personal reservation</button>
		    </view>
		  </view>
			
			
				
		
		<view class="card2">
		   <view class="card2-content">
		     <image class="card2-image" src="../../static/t2.png"></image>
		     <button class="card2-button">团队预约<br>Group reservation</button>
		   </view>
		 </view>
		 
		
		<view class="card3">
		   <view class="card3-content">
		     <image class="card3-image" src="../../static/s1.png"></image>
		     <button class="card3-button">扫码入园<br>Scan the QR code to enter the park</button>
		   </view>
		 </view>
		</view>
	
	

</template>

<script setup>
	 
	
</script>

<style scoped>
	 .main{
		 width: 100%;
		 height: 626px;
		 background-image: url("../../static/lll.png");
		 background-size: cover;
		 background-position: center;
	 }
	 .msg{
		 font-family: PingFangSC-Regular;
		 font-weight: 400;
		 font-size: 10px;
		 color: #05261B;
		 letter-spacing: 0;
		 line-height: 21px;
		 margin-top: 100px;
		 position: absolute;
		 left: 35px;
		 right: 35px;
		 
	 }
	
	       .card1 {
	       width: 290px;
	       height: 70px;
	       background: #FFFFFF;
	       border-radius: 12px;
		   margin-top: 380px;
		   position: absolute;
		   margin-left: 45px;
	       }
	       
	       .card1-content {
			   
			   width: 61.48px;
			   height: 21px;
			   font-family: PingFangSC-Medium;
			   font-weight: 500;
			   font-size: 15px;
			   color: #05261B;
			   letter-spacing: 0;
	         
	       }
	       
	       .card1-image {
	         width: 30px; /* 图片宽度 */
	         height: 30px; /* 图片高度 */
	         border-radius: 50%; /* 图片圆形 */
	         margin-left:20px;
	         margin-top:20px;
	       }
	       
	       .card1-button {
	         padding: 5px 10px; /* 按钮的内边距 */
	         border-radius: 5px; /* 按钮圆角 */
	         background-color:white ; /* 按钮背景色 */
	         color: black; /* 按钮文字颜色 */
	         font-size: 10px; /* 按钮文字大小 */
	         margin-left: 50px; /* 按钮右对齐 */
	         bottom: 20px;
	         height: 50px;
	         width:220px;
	         border:none;
	         line-height: 18px;
	         pointer-events: auto;
	         opacity: 1;
	         margin-top:-23px;
	       }

	.card2 {
	width: 290px;
	height: 70px;
	background: #FFFFFF;
	border-radius: 12px;
	margin-top: 470px;
	position: absolute;
	margin-left: 45px;
	}
	.card2-content {
				   
				   width: 61.48px;
				   height: 21px;
				   font-family: PingFangSC-Medium;
				   font-weight: 500;
				   font-size: 15px;
				   color: #05261B;
				   letter-spacing: 0;
	  
	}
	
	.card2-image {
	  width: 30px; /* 图片宽度 */
	  height: 30px; /* 图片高度 */
	  border-radius: 50%; /* 图片圆形 */
	  margin-left:20px;
	  margin-top:20px;
	}
	
	.card2-button {
	  padding: 5px 10px; /* 按钮的内边距 */
	  border-radius: 5px; /* 按钮圆角 */
	  background-color:white ; /* 按钮背景色 */
	  color: black; /* 按钮文字颜色 */
	  font-size: 10px; /* 按钮文字大小 */
	  margin-left: 50px; /* 按钮右对齐 */
	  bottom: 20px;
	  height: 50px;
	  width:220px;
	  border:none;
	  line-height: 18px;
	  pointer-events: auto;
	  opacity: 1;
	  margin-top:-23px;
	}
	.card3 {
	width: 290px;
	height: 70px;
	background: #FFFFFF;
	border-radius: 12px;
	margin-top: 560px;
	position: absolute;
	margin-left: 45px;
	}
	
	.card3-content {
				   
				   width: 61.48px;
				   height: 21px;
				   font-family: PingFangSC-Medium;
				   font-weight: 500;
				   font-size: 15px;
				   color: #05261B;
				   letter-spacing: 0;
	  
	}
	
	.card3-image {
	  width: 30px; /* 图片宽度 */
	  height: 30px; /* 图片高度 */
	  border-radius: 50%; /* 图片圆形 */
	  margin-left:20px;
	  margin-top:20px;
	}
	
	.card3-button {
	  padding: 5px 10px; /* 按钮的内边距 */
	  border-radius: 5px; /* 按钮圆角 */
	  background-color:white ; /* 按钮背景色 */
	  color: black; /* 按钮文字颜色 */
	  font-size: 10px; /* 按钮文字大小 */
	  margin-left: 50px; /* 按钮右对齐 */
	  bottom: 20px;
	  height: 50px;
	  width:220px;
	  border:none;
	  line-height: 18px;
	  pointer-events: auto;
	  opacity: 1;
	  margin-top:-23px;
	}
	
		 
			   
		   
	
</style>